/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-08-24 10:15:44
 * @filename : src/components/myProfileDetails.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ScrollView
} from 'react-native';

let { width, height } = Utils.size;
let userObj;

class MyProfileDetails extends Component {

    constructor(props) {
        super(props);
        SceneObj.MyProfileAbout = this;
        Share.regResponder('details','MyProfileDetails');
        this.state = {};
        userObj = this.getUserInfo();
    }

    getUserInfo() {
        return JSON.parse(Store.session_user_id);
    }

    responseRender(type) {
    	  userObj = this.getUserInfo();
        this.forceUpdate();
    }

    render() {
    	
    	let detailsObj = this.getDetails();
    	let detailsMatchObj = this.getMatchDetails();

        return (
    	    <View style={styles.myProfileAbout}>
              <ScrollView style={styles.scrollView}>
                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>{Lang.myProfileDetails_worth}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_annualIncome} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.income}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>Appearance</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_height} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.height}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_eyeColor}
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.eyes}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_hairColor}
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.hair}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_bodyType}
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.body}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>{Lang.myProfileDetails_lifeStyle}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_occupation} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.occupation}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_smoking} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.smoker}</Text>
                   </View>
                    <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_drinking} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.drinker}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_haveChildren} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.have_children}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_wantChildren} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.want_children}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_havePets} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.have_pets}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>{Lang.myProfileDetails_personalInfo}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_education} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.education}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_ethnicity} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.ethnicity}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_language} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.language}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_politicalBeliefs} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.political}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_religion} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.religion}</Text>
                   </View>
                </View>



                <View style={styles.rowColumn}>
                   <Text style={styles.rowColumnText}>{Lang.myProfileDetails_aboutMyMatch}</Text>
                </View>


                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>{Lang.myProfileDetails_worth}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_annualIncome} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.income}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>Appearance</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_height} 
                        </Text>
                        <Text style={styles.profileValue}>
                            {
                            	(detailsMatchObj.min_height && detailsMatchObj.max_height) ?
                        	    Share.repalceStr(Lang.myProfileDetails_matchHeight,[detailsMatchObj.min_height,detailsMatchObj.max_height])
                        	    :
                        	    Lang.app_noPreference
                            }
                        </Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_eyeColor}
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.eyes}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_hairColor}
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.hair}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_bodyType}
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.body}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>{Lang.myProfileDetails_lifeStyle}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_occupation} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.occupation}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_smoking} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.smoker}</Text>
                   </View>
                    <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_drinking} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.drinker}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_haveChildren} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.have_children}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_wantChildren} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.want_children}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_havePets} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.have_pets}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>{Lang.myProfileDetails_personalInfo}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_education} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.education}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_ethnicity} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.ethnicity}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_language} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.language}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_politicalBeliefs} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.political}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_religion} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsMatchObj.religion}</Text>
                   </View>
                </View>




              </ScrollView>
            </View>
        );
    }

    getDetails() {
    	let obj = {
                income : Share.searchSelect('local_type',userObj.detail.worth.income, Lang.app_noPreference),
                height : Share.searchSelect('local_height',userObj.detail.basics.height),
                eyes : Share.searchSelect('local_eyes',userObj.detail.basics.eyes_color),
                hair : Share.searchSelect('local_hair',userObj.detail.basics.hair_color),
                body : Share.searchSelect('local_body',userObj.detail.basics.body_type),
                smoker : Share.searchSelect('local_smoker',userObj.detail.lifestyle.smoking),
                drinker : Share.searchSelect('local_drinker',userObj.detail.lifestyle.drinking),
                have_children : Share.searchSelect('local_have_children',userObj.detail.lifestyle.have_children),
                have_pets : Share.searchSelect('local_pets',userObj.detail.lifestyle.have_pets),
                want_children : Share.searchSelect('local_want_children',userObj.detail.lifestyle.want_children),
                education : Share.searchSelect('local_education',userObj.detail.personalinfo.education),
                ethnicity : Share.searchSelect('local_ethnicity',userObj.detail.personalinfo.ethnicity),
                language : Share.showCheckboxLabel('local_language',userObj.detail.personalinfo.language,', '),
                occupation : Share.searchSelect('local_occupation',userObj.detail.personalinfo.occupation),
                political : Share.searchSelect('local_political_beliefs',userObj.detail.personalinfo.political),
                religion : Share.searchSelect('local_religion',userObj.detail.personalinfo.religion),
                //networth : Share.searchSelect('local_net_worth',userObj.detail.worth.net_worth)
            };
        return obj;
    }

    getMatchDetails() {
        let obj = {
            min_height : Share.searchSelect('local_height',userObj.match.match_height_min_all),
            max_height : Share.searchSelect('local_height',userObj.match.match_height_max_all),
            eyes : Share.showCheckboxLabel('local_eyes',userObj.match.match_eyes, '; ', Lang.app_noPreference),
            hair : Share.showCheckboxLabel('local_hair',userObj.match.match_hair, '; ', Lang.app_noPreference),
            body : Share.showCheckboxLabel('local_body',userObj.match.match_body, '; ', Lang.app_noPreference),
            smoker : Share.showCheckboxLabel('local_smoker',userObj.match.match_smoker, '; ', Lang.app_noPreference),
            drinker : Share.showCheckboxLabel('local_drinker',userObj.match.match_drinker, '; ', Lang.app_noPreference),
            have_children : Share.showCheckboxLabel('local_have_children',userObj.match.match_have_children, '; ', Lang.app_noPreference),
            have_pets : Share.showCheckboxLabel('local_pets',userObj.match.match_pets, '; ', Lang.app_noPreference),
            want_children : Share.showCheckboxLabel('local_want_children',userObj.match.match_want_children, '; ', Lang.app_noPreference),
            education : Share.showCheckboxLabel('local_education',userObj.match.match_education, '; ', Lang.app_noPreference),
            ethnicity : Share.showCheckboxLabel('local_ethnicity',userObj.match.match_ethnicity, '; ', Lang.app_noPreference),
            language : Share.showCheckboxLabel('local_language',userObj.match.match_language, '; ', Lang.app_noPreference),
            occupation : Share.showCheckboxLabel('local_occupation',userObj.match.match_occupation, '; ', Lang.app_noPreference),
            political : Share.showCheckboxLabel('local_political_beliefs',userObj.match.match_political_beliefs, '; ', Lang.app_noPreference),
            religion : Share.showCheckboxLabel('local_religion',userObj.match.match_religion, '; ', Lang.app_noPreference),
            income : Share.searchSelect('local_type',userObj.match.match_type, Lang.app_noPreference),
            //networth : Share.searchSelect('local_net_worth',userObj.match.match_net_worth, Lang.app_noPreference),
        };
        return obj;
    }

}

const styles = StyleSheet.create({

    myProfileAbout:{
      flex:1,
    	width:width,
    	height:height-200,
    	backgroundColor:'#fff',
    	paddingTop:10,
    },

    rowColumn: {
        marginLeft:15,
        marginRight:15,
        marginTop:10,
        marginBottom:10,
        borderBottomWidth:1,
        borderColor:'#ccc',
        paddingBottom:5,

    },

    rowColumnText: {
       fontSize:20,
       color:'#3FAFE4',
    },

    rowProfile: {
        marginLeft:15,
        marginRight:15,
        marginTop:10,
        marginBottom:10,
    },

    between: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
    },

    betweenText: {
    	color:'#3FAFE4',
    },

    editIcon: {
    	width:15,
    	height:15, 
    },

    profileKey: {
    	flex:3,
    	marginTop:10,
        color:'#666',
        textAlign:'right',
        paddingRight:15,
    },

    profileValue: {
    	flex:4,
    	paddingTop:2,
    	marginTop:10,
        color:'#000',
        fontSize:12,
    },

});

export default MyProfileDetails;
